<template>
  <el-card>
    <div style="float:left;margin:10px 0;">
      <el-input v-model.trim="params.keyword" placeholder="姓名/手机号" clearable style="width:200px;"
                @keyup.enter.native="search"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="showAddModal" style="margin-left: 30px;">新增</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column label="姓名" prop="name" width="160"></el-table-column>
      <el-table-column label="手机号" prop="phone" width="200"></el-table-column>
      <el-table-column label="备注" prop="address" min-width="200"></el-table-column>
      <el-table-column label="未结清金额" prop="useable" width="140"></el-table-column>
      <el-table-column label="注册时间" prop="create_time" width="180"></el-table-column>
      <el-table-column label="状态" prop="status" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1" class="enable-status">启用</span>
          <span v-if="scope.row.status === 0" class="disable-status">停用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="op" width="300" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
          <el-button type="info" size="mini" @click="checkAccountDetail(scope.row)">查看收入</el-button>
          <el-button v-if="scope.row.status === 0" type="success" size="mini" @click="updateStatus(scope.row.id, 1)">启用
          </el-button>
          <el-button v-if="scope.row.status === 1" type="danger" size="mini" @click="updateStatus(scope.row.id, 0)">停用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows" :page-count="6"
                   :total="total" @current-change="searchPage"></el-pagination>

    <el-dialog :visible="showMergeDialog" width="450px" @close="showMergeDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">{{opTitle}}</div>

      <el-form ref="ruleForm" label-position="left" label-width="100px" :model="formData" :rules="rules">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model.trim="formData.name" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone">
          <el-input v-model.trim="formData.phone" style="width:300px;" maxlength="11" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="address">
          <el-input v-model.trim="formData.address" type="textarea"
                    :rows="2" style="width:300px;" :maxlength="200" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="是否启用：" prop="status">
          <el-select v-model="formData.status" placeholder="请选择状态" style="width:300px;">
            <el-option
              v-for="item in enableTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showMergeDialog = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible="showAccountDetailModal" width="800px" @close="showAccountDetailModal = false">
      <div slot="title" style="text-align: left;font-size: 20px;">收入明细</div>
      <div style="margin:2px 0;display: flex;justify-content: space-between">
        <span>未结清金额：{{ balance }}</span>
        <el-button type="primary" @click="settlement">日 结</el-button>
      </div>
      <el-table :data="accountDetailTableData" border>
        <el-table-column label="交易金额" prop="amount" min-width="120"></el-table-column>
        <el-table-column label="类型" prop="type" min-width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1" class="enable-status">代练入账</span>
            <span v-if="scope.row.type === 2" class="disable-status">日结提出</span>
          </template>
        </el-table-column>
        <el-table-column label="交易时间" prop="create_time" min-width="180"></el-table-column>
      </el-table>

      <el-pagination layout="prev, pager, next" :current-page="accountDetailParams.page" :page-size="accountDetailParams.rows" :page-count="6"
                     :total="accountDetailTotal" @current-change="searchPage"></el-pagination>
    </el-dialog>

  </el-card>
</template>

<script>

    import api from '../../../utils/api';

    export default {
        name: "CustomerInfo",
        data() {
            return {
                enableTypeList: [
                    {label: '启用', value: 1},
                    {label: '停用', value: 0}
                ],
                params: {
                    rows: 10,
                    page: 1,
                    keyword: '',
                },
                total: 0,
                tableData: [],
                showMergeDialog: false,
                opType: 1,//1新增 2编辑 3详情
                opTitle: '',
                formData: {},
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'}
                    ],
                },
                showAccountDetailModal: false,
                balance: 0,
                accountDetailParams:{
                    rows: 10,
                    page: 1,
                    keyword: '',
                },
                accountDetailTableData: [],
                accountDetailTotal: 0,

            }
        },
        methods: {
            search() {
                this.params.page = 1;
                this.searchPage(1);
            },
            searchPage(page) {
                var that = this;
                that.params.page = page;
                api.ajax.get('/customer/page/' + that.params.rows + '/' + that.params.page + '?keyword=' + that.params.keyword).then((result) => {
                    var data = result.data;
                    that.tableData = data.list;
                    that.total = data.total;
                }, function (result) {
                    that.$alert("获取客户列表异常", '失败!');
                })
            },
            showAddModal() {
                this.opType = 1;
                this.opTitle = '新增';
                this.formData = {
                    status: 1
                };
                this.showMergeDialog = true;
            },
            edit(row) {
                this.opType = 2;
                this.opTitle = '编辑';
                this.formData = {
                    id: row.id,
                    name: row.name,
                    phone: row.phone,
                    address: row.address,
                    status: row.status
                };
                this.showMergeDialog = true;
            },
            checkAccountDetail(row){
                this.accountDetailParams.cid = row.id;
                this.balance = row.useable;
                this.accountDetailSearch();
                this.showAccountDetailModal = true;
            },
            accountDetailSearch() {
                this.accountDetailSearchPage(1);
            },
            accountDetailSearchPage(page) {
                var that = this;
                that.accountDetailParams.page = page;
                api.ajax.get('/account/page/' + that.accountDetailParams.rows + '/' + that.accountDetailParams.page +
                    '/' + that.accountDetailParams.cid).then((result) => {
                    var data = result.data;
                    that.accountDetailTableData = data.list;
                    that.accountDetailTotal = data.total;
                }, function (result) {
                    that.$alert("获取收入列表异常", '失败!');
                })
            },
            updateStatus(cid, status) {
                var that = this;
                api.ajax.post('/customer/update/' + cid + '/' + status).then((result) => {
                    that.search();
                    let content = status === 0 ? '停用' : '启用';
                    that.$message.success(content + '成功');
                }, function (result) {
                    that.$alert("修改状态异常", '失败!');
                })
            },
            save() {
                var that = this;
                this.$refs["ruleForm"].validate((valid) => {
                    if (valid) {
                        if (this.opType === 1) {
                            api.ajax.post('customer/add', that.formData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('新增成功');
                                        that.showMergeDialog = false;
                                        that.search();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("新增异常", '失败!');
                                })
                        } else {
                            api.ajax.post('customer/update', that.formData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('修改成功');
                                        that.showMergeDialog = false;
                                        that.search();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("修改异常", '失败!');
                                })
                        }
                    } else {
                        return false;
                    }
                });
            },
            settlement(){
                var that = this;
                api.ajax.post('customer/settlement/' + that.accountDetailParams.cid)
                    .then((result) => {
                        if (result.status == 200) {
                            that.$message.success('日结成功');
                            that.showAccountDetailModal = false;
                            that.search();
                        } else {
                            that.$message(result.msg);
                        }
                    }, (result) => {
                        that.$alert("日结异常", '失败!');
                    })
            }
        },
        activated() {
            this.search();
        },
        created() {
        }
    }
</script>

<style scoped>

</style>
